import React,{ PureComponent } from 'react'
import { connect } from 'react-redux'
import { TopicWrapper, TopicItem } from '../styled'

class Topic extends PureComponent{
   render(){
       const { topicList } = this.props
       return <div>
           <TopicWrapper>
               {topicList.map((item)=>{
                   return <TopicItem key={item.get('id')}>
                       <img
                           className='topic-pic'
                           src= {item.get('imgUrl')}
                           alt=""
                       />
                           {item.get('title')}
                   </TopicItem>
               })
               }
           </TopicWrapper>
       </div>
   }
}
const mapStateToProps = (state)=>{
    return {
        topicList: state.getIn(['home','topicList'])
        // topicList: state.get('home').get('topicList')
    }
}
const mapDispatchToProps = ()=>{
    return {

    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Topic)